<template>
  <div class="box-table" style="margin-top: 20px;">
    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      tooltip-effect="dark"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        prop="index"
        label="序号"
        align="center"
      />
      <el-table-column
        prop="name"
        label="变量名称"
        align="center"
      />
      <el-table-column
        prop="recTime"
        label="实时时间"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="rvalue"
        label="实时值"
        align="center"
        show-overflow-tooltip
      />
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="1"
        :page-size="pagesize"
        :total="tableData.length"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import API from '../../../../api/index'
import bus from '../../../common/bus'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      /* 分页数据*/
      pageTotal: 0,
      currentPage: 1, // 默认第一页
      pagesize: 9 // 当前显示页数
    }
  },
  created() {
    bus.$on('NodeData', msg => {
      localStorage.setItem('NodeList', JSON.stringify(msg))
      this.firedevice()
    })
  },
  methods: {
    // 每个节点的列表
    firedevice() {
      API.datapage.NodeShow().then((res) => {
        if (res.code === 1) {
          const a = res.data.map((res, index) => {
            const c = {
              index: index + 1
            }
            const b = { ...res, ...c }
            return b
          })
          this.tableData = a
          bus.$emit('EchartsData', a)
        }
      }).catch((res) => {
        console.log(res)
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页点击方法
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
    }
  }
}
</script>
<style scoped>
.page-pagination{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.box-table{
  /* height: 44vh;
  width: 100%;
  overflow-y: scroll; */
}
</style>
